import React, { Component } from 'react';
import { Button, Modal, Form, Input, Radio } from 'antd';
import 'antd/dist/antd.css';
import { DeleteOutlined,PlusOutlined,UploadOutlined} from '@ant-design/icons';


/**
 * 添加成绩系数的表单组件
 */
class AddWeightForm extends Component {
    formRef = React.createRef();
    constructor(props) {
        super(props);
        this.state = {
            visible:this.props.visible,
            onCreate:this.props.onCreate,
            onCancel:this.props.onCancel,
        }
    }
    setVisible = (visible)=>{
        this.setState({
            visible:visible
        })
    }



    render() {
        return (
            <Modal
                visible={this.state.visible}
                title={"添加成绩系数"}
                okText="添加"
                cancelText="取消"
                onCancel={this.state.onCancel}
                onOk={() => {
                    this.formRef.current
                        .validateFields()
                        .then(values => {
                            this.formRef.current.resetFields();
                            this.state.onCreate(values);
                        })
                        .catch(info => {
                            console.log('Validate Failed:', info);
                        });
                }}
            >
                <Form
                    ref={this.formRef}
                    layout="vertical"
                    name="form_in_modal"
                    initialValues={{
                        weightName: '',//默认值
                    }}
                >
                    <Form.Item
                        name="weightName"
                        label="新的成绩系数名"
                        rules={[
                            {
                                required: true,
                                message: '成绩系数名不能为空',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

class AddWeightFormModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible:this.props.visible||false,
            onCreate:this.props.onCreate,
        }
        this.formRef = React.createRef();
    }

    /**
     * 设置表单弹出与关闭
     * @param {} visible 
     */
    setVisible = (visible)=>{
        
        this.setState({
            visible:visible
        },()=>{
            this.formRef.current.setVisible(visible);
        })
        
    }


    onCreate = (values)=>{
        let {weightName} = values;
        this.state.onCreate(weightName);
        this.setVisible(false);
    };


    render() {
        return (
            <div>
                <Button 
                    type="primary"
                    icon={<PlusOutlined />}
                    onClick={() => {
                        this.setVisible(true);
                    }}
                    shape='round'
                >
                    添加
                </Button>
                <AddWeightForm
                    ref={this.formRef}
                    visible={this.state.visible}
                    onCreate={this.onCreate}
                    onCancel={() => {
                        this.setVisible(false);
                    }}
                />
            </div>
        );
    }
}

export default AddWeightFormModal;